<template>
  <div class="to-examine">
    <el-collapse v-model="activeNames" class="custom-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title search-title">精准查找</div>
        </template>
        <div class="search">
          <div class="first">
            <div class="input">
              <label>订单号：</label>
              <el-input v-model.trim="params.search.order_no" clearable></el-input>
            </div>
            <div class="input">
              <label>商户编号：</label>
              <el-input v-model.trim="params.search.merchant_no" clearable></el-input>
            </div>
          </div>
          <div class="first">
            <div class="input">
              <label>订单渠道：</label>
              <el-select v-model="params.search.channel_id" placeholder="请选择" clearable>
                <el-option
                  v-for="item in getChannelList"
                  :key="item.id"
                  :label="item.channel_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="input">
              <label>状态查找：</label>
              <el-select
                v-model="params.pay_status"
                placeholder="请选择"
                clearable
                @change="statusChange"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.status"
                  :label="item.label"
                  :value="item.status"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="input" style="max-width:480px">
            <label style="min-width: 22%;">订单创建时间：</label>
            <el-date-picker
              v-model="createtime"
              style="width:500px!important"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
          <div class="input" style="max-width:480px">
            <label style="min-width: 22%;">订单完成时间：</label>
            <el-date-picker
              v-model="endtime"
              style="width:500px!important"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
          <div class="btn">
            <el-button
              type="primary"
              @click="search()"
              v-if="searchInterface('merchant_applies.management')"
            >查找</el-button>
            <el-button @click="resetParams()">重置</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="content">
      <paymentTable
        :loading="loading"
        :status="params.pay_status"
        :list="orderList"
        :callback="childCallback"
      />
      <div class="footer">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.per_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 支付订单管理-支付订单

import paymentTable from './component/payment-order/payment-table'
import { date, copy } from '@/utils'
import { payOrderList } from '@/api/payment-order-admin/payment-order'
import mixins from '@/mixins/channels'
export default {
  mixins: [mixins],
  components: {
    paymentTable
  },
  data() {
    return {
      activeNames: ['1'],
      loading: false,
      orderList: [],
      createtime: [],
      endtime: [],
      total: 0,
      params: {
        page: 1,
        per_limit: 10,
        pay_status: '',
        search: {
          channel_id: '',
          order_no: '',
          merchant_no: '',
          create_time_begin: '',
          create_time_end: '',
          finish_time_begin: '',
          finish_time_end: ''
        }
      },
      statusList: [
        {
          label: '待支付',
          status: 1
        },
        {
          label: '支付成功',
          status: 2
        }
      ]
    }
  },
  beforeMount() {
    this.getData()
  },
  methods: {
    // 查询
    search() {
      this.getData()
    },
    // 监听子组件回调
    childCallback(id) {
      this.getData()
    },
    // 状态切换
    statusChange() {
      this.orderList = []
      this.getData()
    },
    // 重置查找条件
    resetParams() {
      this.createtime = []
      this.endtime = []
      this.params = {
        page: 1,
        per_limit: 10,
        pay_status: '',
        search: {
          channel_id: '',
          order_no: '',
          merchant_no: '',
          create_time_begin: '',
          create_time_end: '',
          finish_time_begin: '',
          finish_time_end: ''
        }
      }
      this.getData()
    },
    // 获取
    getData() {
      this.loading = true
      let params = copy.deepCopy(this.params)
      if (this.createtime && this.createtime.length) {
        const [begin, end] = this.createtime
        params.search.create_time_begin = begin.getTime() / 1000
        params.search.create_time_end = end.getTime() / 1000
      }
      if (this.endtime && this.endtime.length) {
        const [begin, end] = this.endtime
        params.search.finish_time_begin = begin.getTime() / 1000
        params.search.finish_time_end = end.getTime() / 1000
      }
      payOrderList(params)
        .then(res => {
          const {
            data,
            meta: {
              pagination: { total }
            }
          } = res
          data.forEach(i => {
            i.dealt_at = date.formatDate(i.dealt_at)
            i.created_at = date.formatDate(i.created_at)
          })
          this.orderList = data
          this.total = total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 切换页码
    currentChange(value) {
      this.params.page = value
      this.getData()
    },
    sizeChange(value) {
      this.params.per_limit = value
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-order {
  width: 100%;
  height: 100%;
}
</style>